<template>
	<!-- 主煤流运输 -->
	<div class="flex-col h100">
		<my-box title="总览" class="top">
			<List :data="data" />
		</my-box>
		<my-box class="m-t-10" style="height: 220px" title="近24小时皮带运输量分析">
			<my-echarts :options="options" class="h100" />
		</my-box>
		<my-box class="f1 h0 m-t-10" title="近24小时皮带运输情况">
			<template #right>
				<div class="flex">
					<div class="operation flex">
						<div></div>
						<span>工频运行</span>
					</div>
					<div class="stop flex">
						<div></div>
						<span>正常停机</span>
					</div>
				</div>
			</template>
			<template #default>
				<div class="title flex m-between p-10">
					<span>皮带</span>
					<span>运行状态</span>
					<span>当前速度</span>
				</div>
				<div class="flex-col w100 overflow-y-auto" style="max-height: 210px">
					<div class="flex p-5 s-center pointer" v-for="(item, index) in equipmentList" :key="index">
						<span class="belt">{{ item.beltName }}</span>
						<div class="f1 flex">
							<el-progress
								:style="{ width: `${((item.stopTimeCount * 100) / (item.stopTimeCount + item.runTimeCount)).toFixed(2)}%`, 'margin-right': '3px' }"
								color="#3AB973"
								:stroke-width="4"
								:percentage="100"
								:show-text="false"
							>
							</el-progress>
							<el-progress
								:style="{
									width: `${100 - ((item.stopTimeCount * 100) / (item.stopTimeCount + item.runTimeCount)).toFixed(2)}%`,
									'margin-left': '3px'
								}"
								color="#45A5FF"
								:stroke-width="4"
								:percentage="100"
								:show-text="false"
							>
							</el-progress>
						</div>
						<span class="belt1" style="width: 40px">{{ item.speed }}m/s</span>
					</div>
				</div>
			</template>
		</my-box>
	</div>
</template>

<script setup>
import { transportOverview, hourlyTransport, hourlyBelts } from '@a/home'
import List from './component/List.vue'

let options = computed(() => ({
	backgroundColor: 'transparent',
	tooltip: {
		trigger: 'axis',
		backgroundColor: 'rgba(3, 15, 39, 0.8);',
		borderWidth: 2,
		borderColor: ' rgba(76, 107, 209, 0.5)'
	},
	grid: {
		top: 28,
		bottom: 30,
		left: 30,
		right: 20
	},
	yAxis: {
		type: 'value',
		name: 't/h',
		splitNumber: 2,
		min: 'dataMin',
		max: 'dataMax',
		axisLabel: {
			color: '#fff', // x轴颜色
			fontSize: 14
		},
		nameTextStyle: {
			color: '#fff',
			fontSize: 12
		},
		splitLine: {
			show: true,
			lineStyle: { type: 'dashed', color: 'rgba(255, 255, 255,0.5)' }
		},

		axisTick: {
			show: false
		}
	},
	xAxis: {
		axisLabel: {
			color: '#fff', // x轴颜色
			fontSize: 14,
			showMaxLabel: true,
			showMinLabel: true
			// 格式化x轴显示
			// formatter: function (value, index) {
			//     // 如果时间是 23:59:59 , 格式化为 24:00
			//     if (value === new Date(dayjs().endOf('date').format('YYYY-MM-DD HH:mm:ss')).getTime()) {
			//         return dayjs(value).format('24:00');
			//     } else {
			//         // 其他的时间返回格式化 00:00
			//         return dayjs(value).format('HH:mm');
			//     }
			// },
		},
		data: hourlyTransportData.value.time
	},
	series: [
		{
			name: '运输量',
			type: 'line',
			smooth: true,
			lineStyle: {
				color: '#397BFD'
			},
			areaStyle: {
				color: {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: 'rgba(57,123,253,0.5)' // 0% 处的颜色
						},
						{
							offset: 1,
							color: 'rgba(57,123,253,0.00)' // 100% 处的颜色
						}
					],
					global: false // 缺省为 false
				}
			},
			data: hourlyTransportData.value.hourlyTransport
		}
	]
}))

let data = computed(() => [
	{ name: '皮带数', subname: 'Number of belts', value: transportOverviewData.value.beltsCount, unit: '个', icon: 'pidaishu' },
	{ name: '日运输量', subname: 'Daily transportation', value: transportOverviewData.value.dailyTransportation, unit: '万吨', icon: 'riyunshuliang' },
	{
		name: '月运输量',
		subname: 'Monthly transportation',
		value: transportOverviewData.value.monthlyTransportation,
		unit: '万吨',
		icon: 'yueyunshuliang'
	},
	{
		name: '年运输量',
		subname: 'Annual transportation',
		value: transportOverviewData.value.yearlyTransportation,
		unit: '万吨',
		icon: 'nianyunshuliang'
	}
])

// 总览
let transportOverviewData = ref({})
// 近24小时皮带运输量分析
let hourlyTransportData = ref({})
// 近24小时皮带运行情况
let equipmentList = ref([])
transportOverview().then((res) => {
	transportOverviewData.value = res.data
})
hourlyTransport().then((res) => {
	hourlyTransportData.value = res.data
})
hourlyBelts().then((res) => {
	equipmentList.value = res.data
})
</script>

<style lang="scss" scoped>
.all {
	.item {
		height: 48px;
		border-radius: 2px;
		background: #030f27;
		box-sizing: border-box;
		border: 1px solid rgba(76, 107, 209, 0.5);
		box-shadow: inset 0px 0px 12px 0px #3468d8;
		&:not(:first-child) {
			margin-top: 10px;
		}
	}
}
.length {
	color: #397bfd;
	font-size: 14px;
	font-weight: bold;
	margin-left: 4px;
}
.title {
	border-radius: 2px;
	background: rgba(62, 99, 176, 0.2);
	span {
		display: inline-block;
		font-size: 14px;
		color: #fff;
	}
}
//设备运行状态样式
.operation,
.stop {
	justify-content: center;
	align-items: center;
	div {
		margin-left: 5px;
		width: 12px;
		height: 12px;
		opacity: 1;
		box-sizing: border-box;
		border-radius: 50%;
	}
	span {
		margin-left: 5px;
		font-size: 12px;
		color: rgb(130, 135, 144);
	}
}
.operation {
	div {
		border: 3px solid #3ab973;
	}
}
.stop {
	div {
		border: 3px solid #397bfd;
	}
}
.belt,
.belt1 {
	display: inline-block;
	margin-right: 5px;
	text-align: left;
	width: 80px;
	font-size: 13px;
	color: rgb(130, 135, 144);
}
.belt1 {
	margin-left: 5px;
	text-align: right;
}
:deep(.el-progress__text) {
	color: #fff;
}
</style>
